<template>
  <div>
    <van-index-bar sticky>
      <van-index-anchor index="A" />
      <van-cell
        v-for="(item, index) in alist"
        :key="index"
        :title="item.name"
        @click="choose(item.name)"
      />

      <van-index-anchor index="B" />
      <van-cell
        v-for="item in blist"
        :key="item.hot"
        :title="item.name"
        @click="choose(item.name)"
      />

      <van-index-anchor index="C" />
      <van-cell
        v-for="item in clist"
        :key="item.hot"
        :title="item.name"
        @click="choose(item.name)"
      />
      <van-index-anchor index="D" />
      <van-cell
        v-for="item in dlist"
        :key="item.hot"
        :title="item.name"
        @click="choose(item.name)"
      />
      ...
    </van-index-bar>
  </div>
</template>

<script>
import Vue from "vue";
import { IndexBar, IndexAnchor } from "vant";

Vue.use(IndexBar);
Vue.use(IndexAnchor);
import { getcityList, getPXcity } from "../api/city";
export default {
  data() {
    return {
      show: true,

      alist: [],
      blist: [],
      clist: [],
      dlist: [],
    };
  },
  created() {
    //获取城市列表
    getcityList().then((res) => {
      console.log(res);
    }),
      //获取排序的城市列表
      getPXcity().then((res) => {
        console.log("排序的");
        // console.log(res.data);
        this.alist = res.data[0].data;
        // console.log(this.alist);
        this.blist = res.data[1].data;
        this.clist = res.data[2].data;
        this.dlist = res.data[3].data;
      });
  },
  methods: {
    choose(name) {
      localStorage.setItem("city", name);
      this.$router.push("/home");
    },
  },
};
</script>

<style>
</style>